<template>
  <div>
    <h2>插槽</h2>
    <!-- 为子组件提供页面结构(标签) ,父传子是为子组件提供数据-->
    <my-dialog>
      <!-- 在两个标签 直接写的代码,就是传递给插槽的结构 -->
      <template v-slot:title>
        <h3>添加图书</h3>
      </template>
      <template v-slot:content="{ uname, age }">
        <form action="">
          书名: <input type="text" :value="uname" /><br />
          作者: <input type="text" :value="age" /><br />
        </form>
      </template>
      <button>确认添加</button>
      <button>取消</button>
    </my-dialog>
    <!-- <my-dialog>
      <h3>提示</h3>
      <p>你确定要删除吗</p>
      <button>确定</button>
      <button>取消</button>
    </my-dialog> -->
  </div>
</template>

<script>
import MyDialog from "./components/MyDialog.vue";
export default {
  components: { MyDialog },
};
</script>

<style>
</style>